<template>
  <div id="building">
    <!-- 头部盒子 -->
  <div class="header">
    <!-- 标题区域 -->
    <div class="lnner-header">
      <div>
        <h1 class="title">人工智能算法实验室</h1>

        <h2 class="title_2">登录</h2>

        <el-form
          :rules="rules"
          class="login-form"
          ref="form"
          :model="loginform"
          @keyup.enter.native="login"
        >
          <el-form-item prop="account">
            <el-input
              placeholder="请输入学号"
              type="text"
              oninput = "value=value.replace(/[^\d]/g,'')"
              v-model="loginform.account"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              onkeyup="value=value.replace(/[\W]/g,'')"
              v-model="loginform.password"
              show-password
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%"
              @click="login"
              >登 录</el-button
            >
          </el-form-item>
          <el-form-item>
            <div class="zhuce">
              <router-link :to="{ path: '/registe' }" replace>注册</router-link>
            </div>
            <div class="forget">
              <router-link :to="{ path: '/forget' }" replace
                >忘记密码？</router-link
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginform: {
        account: "",
        password: "",
      },

      loading: false,

      rules: {
        account: [
          { required: true, message: "请输入学号", trigger: "biur" },
          // { validator: checkEmail, trigger: "blur" },
        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    async login() {

      if (this.loginform.account == "" || this.loginform.password == "") {
        this.$message.error("请填写完整！");
        return;
      }
       if(this.loginform.account.length!=11){
        this.$message.error("请填写正确学号");
        return;
      }
      if(this.loginform.password.length<3||this.loginform.password.length>6){
        this.$message.error("请填写规定位数密码");
        return;
      }
      const { data: res } = await this.$http.post(
        "http://www.xxr120.xyz:8000/api/users/login",
        {
          account: this.loginform.account,
          password: this.loginform.password,
        }
      );

      if (res.code == 200) {
        this.$message.success("登录成功！");
        this.$router.push("/home");
      } else if (res.code == 100) {
        this.$message.error(res.msg);
      }
      localStorage.setItem("token", res.data);
      localStorage.setItem("account", this.loginform.account);

    },
  },


  watch: {},

  created() {},

  mounted() {
    // 实现按下回车键后登录

    var that = this;

    document.onkeydown = () => {
      var key = window.event.keyCode;

      if (key === 13) {

        that.login()

      }
    };
  },
};
</script>

<style scoped>
#building{
  background:url("../assets/dl.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
.title {
  color: #fff;
  font-weight: 600;
}
.title_2 {
  color: rgb(231, 231, 231);
}
.zhuce,
.forget {
  height: 0;
  margin: 0 10px;
}
.zhuce a {
  text-decoration: none;

  color: #f1f1f1;

  float: left;
}
.forget a {
  text-decoration: none;

  color: #f1f1f1;

  float: right;
}

.header {
  /* position: relative; */
  margin: 0 auto;
  margin-top: 10%;
  width: 40%;
  height: 550px;
  border-radius: 20px;
  /* border: 2px solid; */
  box-shadow:1px 2px 18px 10px rgb(90, 90, 90);
  background: rgba(189, 188, 188, 0.7);
}

.lnner-header {
  height: 500px;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}

h1 {
  text-align: center;

  font-family: "Lato", "sans-serif";

  font-weight: 300;

  /* font-spacing:2px; */

  font-size: 48px;
}

h2 {
  text-align: center;

  font-family: "Lato", "sans-serif";

  font-weight: 300;

  /* font-spacing:2px; */

  font-size: 28px;
}

.login-form {
  margin: 0 auto;

  width: 300px;

  padding-top: 30px;
}

.el-input__inner {
  background-color: rgba(255, 255, 255, 0.7);

  border-radius: 0;

  border: 1px solid #0094ff;

  color: rgba(0, 0, 0, 0.7);
}

.el-input__inner::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.el-button {
  border-radius: 4px;
}
</style>
